<script setup>
import { reactive, ref } from 'vue';
import router from '@/router'

import { useAuthStore } from '@/store/auth';

const authStore = useAuthStore();

let ruleForm = reactive({})
const rules = reactive({
  name:
    [
      { required: true, message: '请输入账号', trigger: 'blur' },
      { min: 2, max: 10, message: '账号长度在 2 到 10 个字符', trigger: 'blur' },
    ],
  password:
    [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 18, message: '密码长度在 6 到 18 个字符', trigger: 'blur' },
    ],
})
const formRef = ref(null)

const onLogin = () => {
  //console.log(ruleForm)
  if (formRef.value) {
    formRef.value.validate(
      async (valid) => {
        // console.log(valid);
        // 调用登录逻辑
        await authStore.login(ruleForm)
        // 登录成功后，进行页面跳转
        // router.push('/home');
      }
    );
  }
}



</script>

<template>

  <body>
    <div class="login">
      <img src="../assets/login-avatar.png" class="avatar">
      <h1 style="color: aliceblue;font-weight: bold;">登录</h1>
      <el-form ref="formRef" :rules="rules" style="max-width: 600px; width:25em;" :model="ruleForm" status-icon
        label-width="auto">
        <el-form-item prop="name">
          <el-input v-model="ruleForm.name" prefix-icon="User" type="text" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" prefix-icon="Lock" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onLogin" style="width: 100%">登录</el-button>
        </el-form-item>
      </el-form>
      <div>
        <router-link to="/register" style="margin-right: 8em;color: aliceblue;">用户注册</router-link>
        <router-link type="warning" style="color: aliceblue;">杨鑫 2110640210</router-link>
      </div>
    </div>
  </body>
</template>

<style scoped>
.el-button[type="primary"] {
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.el-button[type="primary"]:hover {
  transform: scale(1.1); /* 放大 1.1 倍 */
}

.avatar {
  width: 10em;
  border-radius: 50%;
  position: relative;
  top: -5em;
  border: 0.5em solid #FFF;
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.avatar:hover {
  transform: scale(1.1); /* 放大 1.2 倍 */
}

.login {
  border-radius: 10px;
  background-size: cover; /* 保持背景图片填充 */
  width: 40em;
  height: 50em;
  /* background-color: #f5f5f5; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

body {
  background-image: url('../assets/login-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* 背景图片在元素中居中显示 */

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使用视窗高度 */
}
</style>
